<!--
 * @Description:
 * @Author: 
 * @Date: 2023-08-16 09:17:56
 * @LastEditor: 
 * @LastEditTime: 2023-08-19 14:56:20
 
-->


<template>
	<view class="page_content">
		<view class="head_content">
			<!-- #ifndef MP-TOUTIAO -->
			<CustomNavbar :left="0" title="追剧"></CustomNavbar>
			<!-- #endif -->
			<view class="" style="margin: 0 32rpx;">
				<image class="" src="@/static/images/logo.png" mode="heightFix" style="height: 21px;"></image>
			</view>
			<view class="tabs_box1">
				<u-button v-for="(item, itemIndex) in contentList" :key="item.id" :class="{'tab-btn': true,'active': contentCurrent == itemIndex}" :text="item.name"
				  @click="changeContent({'index': itemIndex}, 1)"></u-button>
			</view>
			<!-- <view class="tabs_box">
				<u-tabs :scrollable="false" :lineWidth="0" :list="contentList" :current="contentCurrent" :activeStyle="tabsActiveStyle" :inactiveStyle="tabsInactiveStyle" lineColor="#EE7F33" @change="changeContent($event, 1)" />
			</view> -->
		</view>
		<!-- <ad v-if="bannerAd" :unit-id="bannerAd" bindload="adLoad" binderror="adError" bindclose="adClose"></ad> -->

		<view class="main_content" v-if="contentList && contentList.length">
			
			<swiper style="height: 100%" :skip-hidden-item-layout="true" :current="contentCurrent" @change="changeContent($event, 2)">
				<swiper-item style="height: 100%;" v-for="(item, index) in contentList" :key="item.id">
					<scroll-view style="height: 100%" :scroll-y="true" :refresher-enabled="true" :refresher-threshold="100" :refresher-triggered="refreshStatus" @refresherrefresh="refreshHandle" @scrolltolower="bottomHandle" @scroll="scrollHandle">
						<view class="content_box">
							<view class="list">
								<ad v-if="bannerAd" :unit-id="bannerAd" bindload="adLoad" binderror="adError" @close="adClose" ></ad>
								
								<view class="item" v-for="(lItem, lIndex) in item.list" :key="lIndex" @click="maidian(lItem.vid);openVideoDetail(lItem.video.id, lItem.video.title, lItem.video.image, lItem.video.description)">
									<!-- lieAd&& -->
									<template  v-if="bannerAd&&lIndex % 6== 0 && lIndex!=0">
										<ad v-if="bannerAd" :unit-id="bannerAd" bindload="adLoad" binderror="adError" @close="adClose" ></ad>
									
										
									</template>
									<template v-else>
										<view class="img">
											<image class="image" :src="lItem.video.image" mode="aspectFill"></image>
										</view>
										<view class="info">
											<view class="title u-line-1">{{ lItem.video.title }}</view>
											<view class="text1 u-line-2">{{ lItem.video.description }}</view>
											<view class="btns">
											    <view class="text2">
													<text>看到{{ lItem.episode.name }} / </text>
													<text class="text1">共{{ lItem.video.episodes }}集</text></view>
												<view class="button" v-if="item.id == 1" :class="{ collect: lItem.is_favorite == 1 }" hover-class="active" :hover-start-time="0" :hover-stay-time="200" @click.stop="handleCollect(lItem.vid, lItem.is_favorite, lIndex)">
													<u-icon :name="lItem.is_favorite == 1 ? '/static/images/watch-date.png' : 'star'" color="#ffffff" size="18"></u-icon>
													<text class="text">{{ lItem.is_favorite == 1 ? '已追剧' : '追剧' }}</text>
												</view>
												<view class="button" v-else hover-class="active" :hover-start-time="0" :hover-stay-time="200">
													<u-icon name="play-right-fill" color="#eee" size="18"></u-icon>
													<text class="text">立即观看</text>
												</view>
											</view>
										</view>
									</template>
								</view>
								
							</view>
							<view class="nodata" v-if="!item.list.length && item.status == 'nomore'">
								<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
							</view>
							<view class="liststatus" v-else>
								<u-loadmore :status="item.status" :line="true" />
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- <tabBar v-if="tabChange" selectedIndex =1></tabBar> -->
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
	
	export default {
		data() {
			return {
				navbarTitle: '影视视频',
				// tabsActiveStyle: {
				// 	color: getApp().globalData.isColor,
				// 	fontSize: '32rpx',
				// 	fontWeight: 'bold',
				// },
				// tabsInactiveStyle: {
				// 	color: '#ffffff'
				// },
				contentList: [
					{ id: 1, name: '最近观看记录', type: 'log', list: [], page: 1, pagesize: 10, status: 'loadmore' },
					{ id: 2, name: '我的追剧记录', type: 'favorite', list: [], page: 1, pagesize: 10, status: 'loadmore' },
				],
				contentCurrent: 0,
				refreshStatus: true,
				isRefresh: false,
				//tab更新
				tabChange:false,
				//banner广告位
				bannerAd:null,
				platforms: this.$utils.platforms(),
				//广告位关闭次数
				AdNumber:getApp().globalData.isADTc
			}
		},
		onShow() {
			this.AdNumber=getApp().globalData.isADTc
			this.tabChange = true
			// #ifdef MP-WEIXIN
			if(this.userInfo.mgg == 1){
				this.bannerAd = null
				for(var key in this.contentList[this.contentCurrent].list){  // 自定义变量,存储索引 0 1 2 3 4 ....
					if( this.contentList[this.contentCurrent].list[key].kong ==1){
						this.contentList[this.contentCurrent].list.splice(key, 1);
					}
				       
				}
			}else{
				//console.log('没调用')
			}
			 
			 	
			  // #endif 
			
		},
		onHide(){
			this.tabChange = false
		},
		onLoad() {
			this.getPlayRecordList()
			this.getAD()
		},
		onTabItemTap() {
				this.$request('common.point', {item_id:2 ,   platform:this.platforms, point_type:5 },false).then(res => {
				
				})
			},
		computed: {
			...mapGetters("user", ["userInfo"]),
		},
		watch: {
			
			userInfo(newValue, oldValue) {
				this.userInfo = newValue
			},
			AdNumber(newValue, oldValue) {
				//console.log(newValue,'查看变化')
				if(newValue == 3){
					uni.showModal({
						title: '免广告权限',
						content: `温馨提示：可在[我的]页面开通免广告权限`,
						showCancel:false,
						success: res => {
							if (res.confirm) {
								
							}
						}
					})
					this.AdNumber = 0
					getApp().globalData.isADTc = this.AdNumber
				}else{
					this.AdNumber = newValue
					getApp().globalData.isADTc = this.AdNumber
				}
			}
	
			
		},
		
		methods: {
			adClose() {
				this.AdNumber ++
			    //console.log('Banner 广告关闭')
			  },
			//获取广告
			getAD(){
				// #ifdef MP-WEIXIN
				
				this.$request('common.wxguanggao','',false).then(res => {
					if(res.code === 1) {
						//console.log(res)
						
						if(res.data.list.gg_zhuiju_id && res.data.list.gg_zhuiju_switch == '1'){
							if(res.data.mgg == 1){
								
							}else{
								this.bannerAd = res.data.list.gg_zhuiju_id
								
							}
						
						}
						
					}
				})
				// #endif
				
			
				
			},
			maidian(ids){
				
				this.$request('common.point', { item_id: ids, platform:this.platforms, point_type:2 },false).then(res => {
				
				})
			},
			// 	收藏
			handleCollect(vid, collect, index) {
				if(collect == 0) {
					const obj = {
						vid,
						type: 'favorite'
					}
					this.$request('video.addRecord', obj, false).then(res => {
						if(res.code === 1) {
							this.contentList[this.contentCurrent].list[index].is_favorite = 1
						}
					})
				} else {
					const obj = {
						ids: vid,
						type: 'favorite'
					}
					this.$request('video.deleteRecord', obj, false).then(res => {
						if(res.code === 1) {
							this.contentList[this.contentCurrent].list[index].is_favorite = 0
						}
					})
				}
			},
			// 获取播放记录
			getPlayRecordList() {
				let  status =uni.getSystemInfoSync().uniPlatform
				
				const obj = {
					type: this.contentList[this.contentCurrent].type,
					page: this.contentList[this.contentCurrent].page,
					pagesize: this.contentList[this.contentCurrent].pagesize,
					platform: status == 'mp-weixin'? 2 :1,
				}
				this.contentList[this.contentCurrent].status = 'loading'
				this.$request('video.getRecord', obj).then(res => {
					if(res.code === 1) {
						if(res.data && res.data.length) {
							for(var key in this.contentList[this.contentCurrent].list){  // 自定义变量,存储索引 0 1 2 3 4 ....
								if( this.contentList[this.contentCurrent].list[key].kong ==1){
									this.contentList[this.contentCurrent].list.splice(key, 1);
								}
							       
							}
							
							this.contentList[this.contentCurrent].list = this.contentList[this.contentCurrent].list.concat(res.data)
							this.contentList[this.contentCurrent].list=this.$utils.changeImages(this.contentList[this.contentCurrent].list)
							if(this.userInfo.mgg == 1){
								//console.log('走了')
							}else{
								if(this.bannerAd){
									for(var key in this.contentList[this.contentCurrent].list){  // 自定义变量,存储索引 0 1 2 3 4 ....
										if(key % 6 == 0 && key!=0){
											this.contentList[this.contentCurrent].list.splice(key, 0, {kong:1});
										}
									       
									}
								}
								
							}
							
							if(res.data.length < this.contentList[this.contentCurrent].pagesize) {
								this.contentList[this.contentCurrent].status = 'nomore'
							} else {
								this.contentList[this.contentCurrent].status = 'loadmore'
							}
						} else {
							this.contentList[this.contentCurrent].page > 1 && this.contentList[this.contentCurrent].page--
							const timer = setTimeout(() => {
								this.contentList[this.contentCurrent].status = 'nomore'
								clearTimeout(timer)
							}, 500)
						}
					}
					this.refreshStatus = false
					this.isRefresh = false
				}).catch(err => {
					this.refreshStatus = false
					this.isRefresh = false
				})
			},
			// 下拉刷新
			refreshHandle() {
				this.refreshStatus = true
				if(!this.isRefresh) {
					this.isRefresh = true
					this.contentList[this.contentCurrent].page = 1
					this.contentList[this.contentCurrent].list = []
					this.getPlayRecordList()
				}
			},
			// 滚动监听
			scrollHandle(e) {
				
			},
			// 触底滚动
			bottomHandle() {
				this.contentList[this.contentCurrent].page++
				this.getPlayRecordList()
			},
			// 切换分类
			changeContent(e, i) {
				console.log(111111, e);
				const current = i === 1 ? e.index : e.detail.current
				if(current == this.contentCurrent) return
				this.contentCurrent = current
				!this.contentList[this.contentCurrent].list.length && this.getPlayRecordList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f9f9f9;
	}
	.page_content {
		overflow: hidden;
		
		.head_content {
			.tabs_box {
				padding: 0 100rpx;
			}
			.tabs_box1 {
				padding: 32rpx 100rpx 0 100rpx;
				display: flex;
				.tab-btn {
					// border-radius: 60rpx;
					background: #ffffff80;
					color: #ffffff;
					transform: skew(-10deg, 0);
					border-radius: 40rpx 8rpx 0 60rpx;

					+.tab-btn {
						margin-left: 24rpx;
						border-radius: 8rpx 60rpx 40rpx 0;
					}
					&.active {
						background-color: #ffffff;
						::v-deep .u-button__text {
							background: -webkit-linear-gradient(45deg, #FFD9AF, #FF6C83);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}
			}
		}
		
		.main_content {
			overflow: hidden;

			.content_box {
				padding: 20rpx 32rpx 60rpx 32rpx;
				
				.list {

					.item {
						background-color: #ffffff;
						padding: 24rpx;
						border-radius: 32rpx;
						margin-bottom: 40rpx;
						display: flex;
						align-items: center;
						
						.img {
							width: 152rpx;
							height: 242rpx;
							border-radius: 20rpx;
							overflow: hidden;
							
							.image {
								width: 100%;
								height: 100%;
							}
						}
						
						.info {
							flex: 1;
							margin-left: 24rpx;
							color: #4a4a4a;
							
							.title {
								font-size: 32rpx;
								font-weight: 500;
							}
							
							.text1 {
								height: 68rpx;
								font-size: 24rpx;
								margin-top: 4rpx;
								line-height: 34rpx;
								margin: 10rpx 0;
								opacity: 0.5;
							}
							
							.text2 {
								font-size: 24rpx;
								color: #111;
								line-height: 34rpx;
							}
							
							.btns {
								margin-top: 20rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								
								.button {
									width: 190rpx;
									height: 60rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 28rpx;
									// background: #484B52;
									border-radius: 10rpx;
									color: #fff;
									background: linear-gradient(90deg, #FFD9AF 0%, #FF6C83 100%);
									
									&.collect {
										background: #F0F0F0;
										color: #9e9e9e;
										// opacity: 0.6;
									}
								
									&.active {
										background: rgba(#000, 0.9);
									}
									
									.text {
										margin-left: 8rpx;
									}
								}
							}
						}
					}
				}
				
				.nodata {
					padding: 15vh 0;
				}
			}
		}
	}
</style>